.header {
    // height: 70px;
    background: #242424;
    .content{
        width: 1100px;
        height: 70px;
        margin: 0 auto;
        .logo{
            background: url(../images/topbar.png) no-repeat 0px 0px;
            float: left;
            width: 176px;
            height: 100%;
            a{
                display: inline-block;
                height: 100%;
                width: 100%;
                text-indent: -999px;
            }
        }
        .list{
            float: left;
            list-style: none;
            .listItem{
                float: left;
                height: 100%;
                position: relative;
                &:last-child{
                    position: relative;
                    color:red;
                    span{
                        display: inline-block;
                        width: 28px;
                        height: 18px;
                        position: absolute;
                        top: 20px;
                        right: -18px;
                        background:url(../images/topbar.png) no-repeat -190px 0;
                    }
                }
                a{
                    display: inline-block;
                    height: 100%;
                    padding: 0 19px;
                    color: #fff;
                    line-height: 70px;
                    &:hover{
                        background: #000;
                    }
                    &.active{
                        &::before{
                            content: '';
                            height: 0;
                            width: 0;
                            visibility: visible;
                            display: block;
                            border: 7px solid #242424;
                            border-color: transparent transparent red transparent;
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                    }
                }
            }
        }
        .search{
            width:158px;
            height: 32px;
            float: right;
            background:#fff url(../images/topbar.png) no-repeat 0 -99px;
            margin-top: 19px;
            // margin-left: 80px;
            border-radius: 16px;
            padding-left : 30px;
            .input {
                width: 95%;
                font-size: 12px;
                border: none;
                margin-top: 7px;
                background: transparent;
                outline:none;
            }
        }
        .videoContribute{
            float: right;
            background: url(../images/topbar.png) no-repeat 0 -140px;
            height: 32px;
            width: 90px;
            margin: 19px 0 0 12px;
            font-size: 12px;
            padding-left: 32px;
            line-height: 32px;
            color: #ccc;
            &:hover {
                background: url(../images/topbar.png) no-repeat -100px -140px;
                color: #fff;
            }
        }
        .loginContent{
            width: 50px;
            height: 45px;
            float: right;
            font-size: 12px;
            background:url(../images/topbar.png) no-repeat right -46px;
            margin: 20px 0 0 20px;
            &:hover{
                a{
                    text-decoration: underline;
                }
                .list {
                    display: block;
                } 
            }
            a{
                display: block;
                // text-decoration: underline;
                margin-top: 10px;
                color: #787878;
            }
            .list{
                 background: #303030;
                 margin-top: 16px;
                 margin-left: -66px;
                 border-radius: 2px;
                 position: relative;
                 display: none;
                 z-index: 2;
                 &::before{
                     content: '';
                     height: 0;
                     width: 0;
                     border: 10px solid #fff;
                     border-color: transparent transparent #303030 transparent;
                     visibility: visible;
                     display: block;
                     position: absolute;
                     top: -20px;
                     left: 50%;
                     transform: translateX(-50%);
                 }
                .loginItem{
                    float: left;
                    height: 38px;
                    width: 158px;
                    padding-left: 20px;
                    border-bottom: 1px solid #222;
                    &:hover{
                            background: #404040;
                    }
                    a{
                        height: 100%;
                        width: 100%;
                        line-height: 20px;
                        color: rgb(204,204,204);
                        text-decoration: none;
                        span{
                            display: block;
                            float: left;
                            width: 18px;
                            height: 18px;
                            background: url(../images/toplist.png) no-repeat 0 0;
                            margin-right: 10px;
                        }
                    }
                    &:nth-child(2){
                        span{
                            background-position: -20px -20px;
                        }
                    }
                    &:nth-child(3){
                        span{
                            background-position: -20px -40px;
                        }
                    }
                    &:nth-child(4){
                        span{
                            background-position: 0 -20px;
                        }
                    }
                    &:nth-child(5){
                        border-bottom:none;
                        span{
                            background-position: 0 -20px;
                        }
                    }
                    
                }
            }
        }


    }
   
}
